<template>
	<div class="panel display-panel">
		<div class="panel-body">
			<div class="box-title">
				<span class="que-title">{{ que.que_num + "、" + TYPETEXT[que.que_type] }}</span>
				<span>分值 {{ que.que_score }}</span>
				<span class="text-danger answer" v-if="que.que_answer">答案 {{ que.que_answer }}</span>
			</div>
			<div class="box-body">
				<p>{{{ que.que_content }}}</p>
				<validator name="itemAnswer">
				<template v-if="que.que_type==0">
					<div class="radio" v-for="item in que.que_items">
					<label class="display-label"><input type="radio" 
								  :name="'display'+que.que_num"
								  :value="$index"
								  v-validate:answer="formFileds.answer.validate"
								  v-model="que.stu_answer"
								  @change="saveAnswer"
								  :disabled="readOnly">
						{{ item }}
					</label>
					</div>
				</template>
				<template v-if="que.que_type==1">
					<div class="radio" v-for="item in que.que_items" track-by="$index">
						<label class="display-label"><input type="radio" 
									  :name="'display'+que.que_num"
									  :value="$index"
									  v-validate:answer="formFileds.answer.validate"
									  v-model="que.stu_answer"
									  @change="saveAnswer"
									  :disabled="readOnly">
							{{ OPTIONTEXT[$index] }}、 
							<div class="display-item">{{{ item }}}</div>
						</label>
					</div>
				</template>
				<template v-if="que.que_type==2">
					<div class="checkbox" v-for="item in que.que_items" track-by="$index">
						<label class="display-label"><input type="checkbox"
									  :name="'display'+que.que_num"
									  :value="$index+''"
									  v-validate:answer="formFileds.answer.validate"
									  v-model="que.stu_answer"
									  @change="saveAnswer"
									  :disabled="readOnly">
							{{ OPTIONTEXT[$index] }}、
							<div class="display-item">{{{ item }}}</div>
						</label>
					</div>
				</template>
				<template v-if="que.que_type==3&&!readOnly">
					<div v-q-textarea="que.stu_answer" class="que-area que-content" contenteditable="true" @blur="saveAnswer" :placeholder="formFileds.answer.placeholder"></div>
					<textarea type="text" class="que-area que-content" rows="1" :placeholder="formFileds.answer.placeholder"
						v-model="que.stu_answer" 
						v-validate:answer="formFileds.answer.validate">
					</textarea>
				</template>
				<template v-if="que.que_type==4&&!readOnly">
					<div v-q-textarea="que.stu_answer" class="que-area que-content" contenteditable="true" @blur="saveAnswer" :placeholder="formFileds.answer.placeholder"></div>
					<textarea type="text" class="que-area que-content" rows="1" :placeholder="formFileds.answer.placeholder"
						v-validate:answer="formFileds.answer.validate"
						v-model="que.stu_answer"></textarea>
				</template>
				<p v-if="readOnly&&!que.stu_answer&&que.que_type>2">[未作答]</p>
				</validator>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		ready: function() {
			
		},
		props: ['que', 'index', 'readOnly'],
		data() {
			return {
				TYPETEXT : ["判断题", "单选题", "多选题", "填空题", "简答题"],
                OPTIONTEXT: ['A','B','C','D','E','F','G','H'],
                validatorName: 'queVali',
                formFileds: {
                	answer: {
                		placeholder: '请输入答案',
                		validate: {
                			required: {rule: true, message: '请输入答案'}
                		}
                	}
                },
                contentOption: {
                	lang: 'zh-CN',
                	placeholder: '请输入题干',
                	toolbar: [
                	    ['style', ['bold', 'italic', 'underline', 'strikethrough', 'style']],
                	    ['font', ['superscript', 'subscript']],
                	    ['fontsize', ['fontsize']],
                	    ['color', ['color']],
                	    ['para', ['ul', 'ol', 'paragraph']],
                	    ['Insert', ['picture']]
	            	],
	            	callbacks: {
	            	    /*onImageUpload: function(files) {
	            	      	console.log(files);
	            	      	
	            	      	uploader.bind('FileUploaded', function() {
	            	      	        console.log('hello man,a file is uploaded');
	            	      	    });
	            	        // upload image to server and create imgNode...
	            	        //$summernote.summernote('insertNode', imgNode);
	            	      }*/
	            	}
                }
			}
		},
		methods: {
			saveAnswer () {
				if (this.$itemAnswer.errors) {
					this.$dispatch('msg', this.$itemAnswer.errors[0].message);
				} else {
					this.$dispatch('save-answer', this.index);
				}
			}
		}
	}
</script>

<style>
</style>